<!--
 * @Author: luoyun
 * @Descripttion: 
-->
<template>
  <div class="detail">
    <top-nav-bar @titleClick="titleClick"></top-nav-bar>
    <scroll class="content" ref="scroll">
      <swiper :top-imgs="topImgs" chass="detail-swiper"></swiper>
      <base-info :goods="goods"></base-info>
      <shop-info :shop="shopInfo"></shop-info>
      <detail-image-info
        :detailInfo="detailInfo"
        @imageLoad="imageLoad"
        ref="goods"
      ></detail-image-info>
      <detail-param-info
        :paramInfo="paramInfo"
        ref="params"
      ></detail-param-info>
      <detail-comment-info
        :commentInfo="commentInfo"
        ref="comment"
      ></detail-comment-info>
      <good-list :goodsList="commendInfo" ref="commend"></good-list>
    </scroll>
  </div>
</template>

<script>
import topNavBar from "./child/TopNavBar.vue";
import Swiper from "./swiper/Swiper";
import BaseInfo from "./child/BaseInfo";
import ShopInfo from "./child/ShopInfo";
// import DetailImageInfo from "./child/GoodsDetailInfo";
import DetailImageInfo from "./child/DetailGoodsInfo";
import DetailParamInfo from "./child/DetailParamInfo";
import DetailCommentInfo from "./child/DetailCommentInfo";
import GoodList from "components/content/goods/GoodList";
import Scroll from "components/common/scroll/Scroll";

import { getDetail, Goods, getCommend } from "network/detail";
import { debounce } from "common/utils.js";
export default {
  name: "Detail",
  data() {
    return {
      id: null,
      topImgs: [],
      goods: {},
      shopInfo: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {}, //评论信息
      commendInfo: [], //推荐信息
      newRefresh:null,
      itemImgLister: null, //监听图片加载的时间，以防抖
      themeTopYs: [0, 1000, 2000, 3000],
      getThemeTopY: null, //用户监听顶部tab切换时的页面滚动位置
    };
  },

  components: {
    topNavBar,
    Swiper,
    BaseInfo,
    DetailImageInfo,
    Scroll,
    ShopInfo,
    DetailParamInfo,
    DetailCommentInfo,
    GoodList,
  },

  methods: {
    async getDetail() {
      const result = await getDetail(this.id);
      console.log("result==", result);
      const data = result.result;
      // 获取轮播图信息
      this.topImgs = data.itemInfo.topImages;
      // 获取商品信息
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // 店铺信息
      this.shopInfo = data.shopInfo;
      // 取出详情信息
      this.detailInfo = data.detailInfo;
      // 取出参数数据
      this.paramInfo = data.itemParams;
      // 评论
      this.commentInfo = data.rate.cRate > 0 ? data.rate.list[0] : {};
    },
    async getCommend() {
      const res = await getCommend();
      console.log("res==", res);
      // 获取推荐数据
      this.commendInfo = res.data.list;
    },
    // 监听图片列表加载完成
    imageLoad() {
      console.log("---------------")
      this.newRefresh()
      this.getThemeTopY();
    },
    // 定价顶部导航
    titleClick(index) {
      console.log("aaa==", this.themeTopYs[index]);
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index]+44, 100);
    },
  },
  mounted() {
    // 防抖处理
    this.newRefresh = debounce(this.$refs.scroll.refresh, 100);
    this.itemImgLister = () => {
      this.newRefresh();
    };
    // 监听图片滚动加载，防抖
    this.$bus.$on("itemImgLoad", this.itemImgLister);
  },

  created() {
    this.id = this.$route.params.id;
    console.log("id==", this.id);
    this.getDetail();
    this.getCommend(); //推荐信息
    
    this.getThemeTopY = debounce(() => {
      console.log("200")
      //防抖等待图片加载出来后再计算，因为图片是异步加载，必须等图加载后
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      this.themeTopYs.push(this.$refs.commend.$el.offsetTop);
      console.log(this.themeTopYs);
    }, 100);
  },
  destroyed() {
    //如果detail路径没有做缓存keep-alive，则用destroyed，否则首页用deactivated
    this.$bus.$off("itemImgLoad", this.itemImgLister);
  },
};
</script>

<style lang='scss' scoped>
.detail {
  position: relative;
  z-index: 100;
  height: 100vh;
  background: #fff;
  .detail-swiper {
    height: 300px;
  }
  .content {
    height: calc(100vh - 44px);
    background: #fff;
  }
}
</style>